<template>
  <el-container>
    <el-header>
      <el-page-header @back="goBack" content="帖子详情 "></el-page-header>
    </el-header>

        <div class="post-list">
          <el-card v-for="post in posts" :key="post.id" @click.native="goToPost(post.id)" class="post-card">
            <div class="post-title">{{ post.title }}</div>
            <div class="post-info">
              <span class="post-category">{{ post.category }}</span>
              <span class="post-date">{{ post.date }}</span>
            </div>
            <div class="post-summary">{{ post.summary }}</div>
          </el-card>
        </div>


  </el-container>
</template>

<script>
export default {
  data() {
    return {
      posts: [
        {
          id: 1,
          title: '文章1标题',
          category: '文章分类1',
          date: '2023-04-18',
          summary: '这是文章1的摘要',
          content: '这是文章1的内容',
        },
        {
          id: 2,
          title: '文章2标题',
          category: '文章分类2',
          date: '2023-04-17',
          summary: '这是文章2的摘要',
          content: '这是文章2的内容',
        },
        // 其他文章数据
      ],
    };
  },
  methods: {
     goToPost(id) {
      // 跳转到帖子详情页面
      this.$router.push(`/post/${id}`);
    },
    goBack() {
      this.$router.push("/userInformation");
    },
  },
};
</script>

<style scoped>


.form-item {
  margin-bottom: 20px;
}

.post-list {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.post-card {
  width: 80%;
  margin-bottom: 16px;
  cursor: pointer;
}

.post-title {
  font-size: 24px;
  margin-bottom: 8px;
}

.post-info {
  font-size: 14px;
  color: #888;
  margin-bottom: 8px;
}

.post-category {
  margin-right: 8px;
}

.post-summary {
  font-size: 16px;
  line-height: 1.5;
}
</style>
